<template>
  <div class="yingmoo-store">
    <ul class="nav">
      <router-link tag="li" to="/ymMemberaccount">账户信息</router-link>
      <router-link tag="li" to="/ymMemberaccountamendtel">修改手机号</router-link>
      <router-link tag="li" to="/ymMemberaccountamendneweimal">修改邮箱</router-link>
      <router-link tag="li" to="/ymMemberaccountamendpassword">修改密码</router-link>
      <router-link tag="li" v-if="user.shop == 0" to="/ymMemberapplyforverify">申请验证</router-link>
    </ul>
    <div class="error">
      <div class="content">
        <div class="message">
          <div class="message-left">
            <p>用户名</p>
            <p>原密码</p>
            <p>新密码</p>
            <p>确认密码</p>
            <p>验证码</p>
          </div>
          <div class="message-right">
            <p class="name">{{user.contentUser}}</p>
            <div class="input">
              <input v-model="oldPass" type="text" class="input" placeholder="" />
            </div>
            <div class="input">
              <input v-model="newPass" type="text" class="input" placeholder="" />
            </div>
            <div class="input">
              <input v-model="reNewPass" type="text" class="input" placeholder="" />
            </div>
            <div class="input">
              <input id="validateCode" type="text" placeholder="" />
	          	<span class="img">
	          		<img height="35px" width="95px" :src="picUrl" />
	          	</span>
	          	<span class="color cm" @click="changeValidateCode">看不清，换一张</span>
            </div>
            <div class="submit" @click="submit">提交</div>
            <!--<router-link tag="div" to="/ymMemberaccountamendnewtel" class="submit">提交</router-link>-->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "yingmoo-store",
  data(){
  	return{
  		requestAddr:this.GLOBAL.addr,
  		user:{},
  		oldPass:null,
  		newPass:null,
  		reNewPass:null,
  		picUrl:'',
  		picCodeValue:null
  	}
  },
  mounted(){
  	this.getUser()
  	this.getCodeValue()
  	this.picUrl=this.requestAddr+"/Login/getValidateCode?type=1&date="+new Date()
  },                   
  methods:{
  	getUser:function(){
  		var data = localStorage.getItem("user");
			if(data != null){
				this.user = JSON.parse(localStorage.getItem("user"));
				console.log(this.user);
			}
  	},
  	/*刷新图片验证码*/
		changeValidateCode:function(){
			this.picUrl = this.requestAddr+"/Login/getValidateCode?type=1&date="+new Date();
			this.getCodeValue();
		},
  	getCodeValue:function (){
			this.$http.post(this.requestAddr+"/Login/getCodeValue",{emulateJSON: true}).then(
	      (res)=>{
	      	var d = res.data;
	      	this.picCodeValue = d.result.code;
	      },
	      (error)=>{
	        console.log(error);
	      });
		},
  	submit:function(){
  		var validateCode = document.getElementById("validateCode").value;
  		if(this.oldPass=='' || this.oldPass == null){
  			alert("原密码不能为空！")
  			return
  		}
  		if(this.newPass == '' || this.newPass == null){
  			alert("请输入新密码！")
  			return
  		}else if(this.newPass != this.reNewPass){
  			alert("两次输入密码不一致！")
  			return
  		}
  		if(validateCode == '' || validateCode == null){
  			alert("请输入验证码！")
  			return
  		}else if(validateCode.toLowerCase() != (this.picCodeValue).toLowerCase()){
  			alert("验证码输入有误！")
  			return
  		}
  		
  		this.$http.post(this.requestAddr+"/GetJson/validatePwd",{"password":this.oldPass},{emulateJSON:true}).then(
  			(res)=>{
  				console.log(res.data.password);
  				console.log(this.user.contentPass)
  				if(this.user.contentPass != res.data.password){
  					alert("原始密码不正确！");
  					return;
  				}
  				this.user.contentPass = this.newPass;
  				this.$http.post(this.requestAddr+"/GetJson/changePsw",this.user,{emulateJSON:true}).then(
  					(res)=>{
  						if(res.data.code == 0)
  							this.$confirm('密码修改成功,请重新登录！', '提示', {
						      confirmButtonText: '确定',
						      cancelButtonText: '取消',
						      type: 'success' 
								}).then(
									()=>{
										window.location.href = "../#/ymRegister"										
									}
								)
  					}
  				)
  			}
  		)
  	}
  }
}
</script>
<style scoped>
  .el-steps{
    width: 500px;
    padding-left: 100px;
    padding-top: 35px;
  }
</style>
<style scoped lang="less">
.yingmoo-store{
  width: 100%;
  .nav{
    width: 1200px;
    height: 46px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    background-color: #f2f2f2;
    margin-top: 20px;
    li{
      list-style: none;
      width: 90px;
      height: 30px;
      margin: 0 20px;
      line-height: 30px;
      color: #666666;
      text-align: center;
      font-size: 16px;
      cursor: pointer;
      &:nth-child(4){
        background-color: #036eb7;
        color: white;
      }
      &:hover{
        background-color: #036eb7;
        color: white;
      }
    }
  }
  .error{
    width: 1200px;
    height: 560px;
    background-color: white;
    margin: 0 auto;
  .content{
    width: 1200px;
    height: 470px;
    background-color: white;
    margin: 0 auto;
    margin-bottom: 30px;
    h4{
      font-size: 16px;
      color: #333333;
      font-weight: bold;
      padding-left: 40px;
      padding-top: 40px;
    }
    .message{
      display: flex;
      .message-left{
        p{
          width: 145px;
          text-align: right;
          line-height: 60px;
          font-size: 12px;
          color: #333333;
          &:nth-child(1){
            margin-top: 20px;
          }
        }
      }
      .message-right{
        margin-left: 25px;
        .name{
          margin-top: 30px;
          line-height: 37px;
        }
        p{
          line-height: 23px;
          color: #999999;
          font-size: 14px;
          margin-top: 38px;
          span{
            margin-left: 10px;
            img{
              margin-right: 3px;
            }
          }
        }
        div{
          margin-top: 25px;
          .input{
            width: 625px;
          }
          input{
            width: 503px;
            height: 31px;
            padding-left: 10px;
            font-size: 14px;
            outline: none;
            border-radius: 3px;
            border: 1px solid #dddddd;
          }
          .img{
            img{
              position: relative;
              top: 10px;
              left: 15px;
            }
          }
          .color{
            color: #f29600;
            font-size: 14px;
            padding-left: 15px;
          }
          .cm{
            padding-left: 30px;
            cursor: pointer;
          }
        }
        .submit{
          width: 103px;
          height: 30px;
          color: white;
          background-color: #f29600;
          text-align: center;
          line-height: 30px;
          border-radius: 7px;
          margin-top: 44px;
          cursor: pointer;
        }
      }
    }
  }
  }
}
</style>
